<template>
    <!-- 面包屑 -->
    <div class="header">
        <div class="left">
            <el-icon style="cursor: pointer;" v-if="!data.modelValue" size="20px" @click="setCollapse">
                <Fold />
            </el-icon>
            <el-icon style="cursor: pointer;" v-else size="20px" @click="setCollapse">
                <Expand />
            </el-icon>
            <div class="title">
                首页
                <div v-if="data.power[data.activ].value != '首页'">
                    <span v-if="data.power[data.activ].parent">> {{ data.power[data.activ].parent }}</span>

                    <span>> {{ data.power[data.activ].value }}</span>

                </div>
            </div>
        </div>
        <div>
            <el-tooltip class="box-item" effect="dark" content="换肤" placement="bottom">
                <el-switch v-model="value2" class="mt-2"
                    style="--el-switch-on-color: rgb(192, 192, 192); --el-switch-off-color: rgb(105, 105, 105)"
                    inline-prompt :active-icon="Moon" :inactive-icon="Sunny" />
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="全屏" placement="bottom">
                <el-icon style="margin-left: 50px ; cursor: pointer;" @click="full">
                    <FullScreen />
                </el-icon>
            </el-tooltip>

            <!-- 用户信息 -->
            <div class="box-item" v-if="store.user" style="margin-left: 50px ; cursor: pointer;">

                <userOperation :deleteUser="deleteUser" :dark="dark"></userOperation>
            </div>
        </div>

    </div>
    <div class="header2">
        <TransitionGroup name="list">
            <div @click="clickHeader(index)" :class="{ activ: data.activ == index ,tes:true}" v-for="item, index in data.power"
                :key="item.index">
                <el-icon :color="data.activ == 0 ? 'rgb(13, 149, 202)' : 'var(--color)'" v-if="item.value == '首页'">
                    <HomeFilled />
                </el-icon>
                {{ item.value }}
                <div @click.stop="deletHeader(index)" v-if="item.value != '首页'">
                    x
                </div>
            </div>

        </TransitionGroup>
    </div>
</template>
<script lang="ts" setup>
/**
 *顶部导航 
 */

import { ref, watchEffect } from "vue"
import { useRouter } from "vue-router"
import { useStore } from '@/stores/counter'
import { Sunny, Moon } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { routerHis, activ } from "@/hooks/routerHi"
import { deleteRouters ,close} from "@/hooks/index"
import userOperation from './userOperation.vue'
import route from '@/router'
/**
 * 打开全屏模式
 */

const full = () => {
    document.documentElement.requestFullscreen()
}
const store = useStore()

const router = useRouter()
let data = defineProps<{
    modelValue: any     //控制菜单隐藏
    activ: number,      //
    go: Function,
    power: Array<{
        value: string,
        path: string,
        parent?: string,
        index: string
    }>
}>()
//左侧菜单栏显示隐藏
const emit = defineEmits(['update:modelValue', 'update:activ'])
const setCollapse = () => {
    emit('update:modelValue', !data.modelValue)
}

/**
 * 点击导航触发跳转路由
 * @param index 点击的下标
 */
const clickHeader = (index: number) => {
    emit('update:activ', index)
    data.go(data.power[index].path)
}
/**
 * 删除历史路由记录
 */
const deletHeader = (index: number) => {
    if (data.activ == index) {
        data.go(data.power[index - 1].path)
    }
    emit('update:activ', data.activ - 1)
    routerHis.value.splice(index, 1);
}

//退出登录
//清除用户信息
const deleteUser = async () => {
    deleteRouters(route)
    close()  
    //清空存储内容
    try{
        await  new Promise((r,rj)=>{
            
    store.$reset()
    localStorage.clear()
    sessionStorage.clear()
    // Cookies.remove('token')
    routerHis.value = [{
        value: "首页",
        path: "/home/indexdefault",
        parent: '',
        index: "0"
    }]
    activ.value = 0
    // close()
    //回到登录页面
    
    
    router.push({
        path: '/sign'
    })
  
   
    r('成功')
   })
    }finally{
    
        
        // setTimeout(() => {
        //     location.reload();
        // }, 1000);
    }
    // useWebSocketClass.instance.ws.close();
    
    
   
}
const dark = () => {
    ElMessageBox.confirm(`确定要修改退出登录吗的信息吗`)
        .then(() => {
            deleteUser()
        })
        .catch(() => {
            // catch error
        })
}

let value2 = ref(false)
//换肤
watchEffect(() => {
    if (value2.value) {
        document.documentElement.style.setProperty('--colors', 'white')
        document.documentElement.style.setProperty('--backcor', 'black')
        document.documentElement.style.setProperty('--sing', '#141414')
    }
    else {
        document.documentElement.style.setProperty('--colors', 'black')
        document.documentElement.style.setProperty('--backcor', 'white')
        document.documentElement.style.setProperty('--sing', '#FCFCFC')
    }

})
</script>



<style lang=less  scoped>
.list-move,
/* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
    transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
    opacity: 0;
    transform: translateX(-30px);
}

.activ {
    border-bottom: 2px solid rgb(13, 149, 202) !important;
    color: rgb(13, 149, 202);
}

.title {

    margin-left: 15px;
    .flexAc();
    font-weight: 600;
    font-size: 15px;

    span {
        margin-left: 5px;
    }

    span:nth-child(2) {
        font-weight: 100;
    }
}

.header {
    padding-left: 10px;
    height: 50px;
    border-bottom: 1px solid rgb(161, 161, 161);
    .flexAc();
    justify-content: space-between;
    color: @color;

    .left {
        .flexAc();
    }

    >div:nth-child(2) {
        margin-right: 40px;
        display: flex;
        height: 100%;
        justify-content: space-evenly;
        align-items: center;
    }
}

.ami {
    animation: aa 0.5s linear;
}

@keyframes aa {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
.tes{
    .textNOLine();
}
.header2 {
    margin-left: 3px;
    margin-top: 20px;
    .flexAc();
    color: @color;

    >div {
        .flexAc();
        padding: 2px 15px;
        margin: 0px 8px;
        border-bottom: 2px solid rgba(255, 255, 255, 0);
        transition: all 0.3s linear;

        div {

            margin-left: 10px;
            opacity: 0;
            color: @color;
            transition: all 0.3s linear;
            cursor: pointer;
        }
    }

    >div:hover div {
        opacity: 1;
    }
}
</style>